<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: "montserrat", sans-serif;
        }
        
        .gallery-section {
            width: 100%;
            padding: 60px 0;
            background: #f1f1f1;
        }
        
        .inner-width {
            width: 100%;
            max-width: 1200px;
            margin: auto;
            padding: 0 20px;
        }
        
        .gallery-section h1 {
            text-align: center;
            text-transform: uppercase;
            color: #333;
        }
        
        .border {
            width: 180px;
            height: 4px;
            background: #333;
            margin: 60px auto;
        }
        
        .gallery-section .gallery {
            display: flex;
            flex-wrap: wrap-reverse;
            justify-content: center;
        }
        
        .gallery-section .image {
            flex: 25%;
            overflow: hidden;
            cursor: pointer;
        }
        
        .gallery-section .image img {
            width: 100%;
            height: 100%;
            transition: 0.4s;
        }
        
        .gallery-section .image:hover img {
            transform: scale(1.4) rotate(15deg);
        }
        
        @media screen and (max-width:960px) {
            .gallery-section .image {
                flex: 33.33%
            }
        }
        
        @media screen and (max-width:768px) {
            .gallery-section .image {
                flex: 50%
            }
        }
        
        @media screen and (max-width:480px) {
            .gallery-section .image {
                flex: 100%
            }
        }
    </style>
</head>

<body>

    <div class="gallery-section">
        <div class="inner-width">
            <h1>My Gallery</h1>
            <div class="border"></div>
            <div class="gallery">

                <a href="img/039CD79413AA595CBE737ED2A0E68CFA.jpg" class="image">
                    <img src="img/039CD79413AA595CBE737ED2A0E68CFA.jpg" alt="">
                </a>
                <a href="img/0582E90E283C793DA5E21F73B05A96FC.jpg" class="image">
                    <img src="img/0582E90E283C793DA5E21F73B05A96FC.jpg" alt="">
                </a>
                <a href="img/0EE555D7FD6210526F4FF207A5B62EA4.jpg" class="image">
                    <img src="img/0EE555D7FD6210526F4FF207A5B62EA4.jpg" alt="">
                </a>
                <a href="img/175ABF435DCAA879F12480EC9B4AE722.jpg" class="image">
                    <img src="img/175ABF435DCAA879F12480EC9B4AE722.jpg" alt="">
                </a>
                <a href="img/1C3CD1F480B760D64030DFCA64540DF8.jpg" class="image">
                    <img src="img/1C3CD1F480B760D64030DFCA64540DF8.jpg" alt="">
                </a>
                <a href="img/2B74AF1EEE608234E36A2FE3193F7EA7.jpg" class="image">
                    <img src="img/2B74AF1EEE608234E36A2FE3193F7EA7.jpg" alt="">
                </a>
                <a href="img/6657DF65C61CE417CCDF9FF812368A95.jpg" class="image">
                    <img src="img/6657DF65C61CE417CCDF9FF812368A95.jpg" alt="">
                </a>
                <a href="img/755FED797BF9B61BE4BC02898D08CBCA.jpg" class="image">
                    <img src="img/755FED797BF9B61BE4BC02898D08CBCA.jpg" alt="">
                </a>

            </div>
        </div>
    </div>

    <script>
        $(".gallery").magnificPopup({
            delegate: 'a',
            type: 'image',
            gallery: {
                enabled: true
            }
        })
    </script>
</body>

</html>